<!--
 * @Author: lmh
 * @Date: 2021-09-11 22:36:05
 * @LastEditTime: 2021-09-11 22:52:22
 * @LastEditors: lmh
 * @Description: 拦截数组的方法
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let ARRY_METHOD = [
            'push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'
        ]

        // 思路， 原型式继承：修改原型链的结构
        let arr = [];
        // 继承关系：arr -> Array.prototype -> Object.prototype -> ...
        // 继承关系：arr -> 改写方法 -> Array.prototype -> Object.prototype -> ...
        let array_methods = Object.create(Array.prototype)

        ARRY_METHOD.forEach(method => {
            array_methods[method] = function() {
                // 调用原来的方法
                console.log('调用的是拦截的 ' + method + ' 方法')

                // 将数据进行响应式化

                let res = Array.prototype[method].apply(this, arguments)
                return res
            }
        })
        arr.__proto__ = array_methods

        // Vue源码中也做了判断
        // 如果浏览器中支持__proto__，那么就这么做
        // 如果浏览器不支持，那么使用的混入发法
    </script>
</body>
</html>
